<template>
	<div>
		<!-- 轮播图区域 -->
		<mt-swipe :auto="4000">
		  <!-- <mt-swipe-item>1</mt-swipe-item>
		  <mt-swipe-item>2</mt-swipe-item>
		  <mt-swipe-item>3</mt-swipe-item> -->
			
		  <!-- 在组件中，使用 v-for 一定要使用 key -->
		  <mt-swipe-item v-for="item in lunbotuList" :key='item.url'>
			<img :src="item.img" alt="">
		  </mt-swipe-item>
		</mt-swipe>

		<!-- 九宫格 改造成 六宫格 -->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
            	<router-link to="/home/newslist">
                    <!-- <span class="mui-icon mui-icon-home"></span> -->
                    <!-- 用自己的图片代替原来的 -->
                    <img src="../../images/001.png" alt="">
                    <div class="mui-media-body">新闻资讯</div>
                </router-link>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/002.png" alt="">
                    <div class="mui-media-body">图片分享</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/003.png" alt="">
                    <div class="mui-media-body">商品购买</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/004.png" alt="">
                    <div class="mui-media-body">留言反馈</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/005.png" alt="">
                    <div class="mui-media-body">视频专区</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                    <img src="../../images/006.png" alt="">
                    <div class="mui-media-body">联系我们</div></a></li>
        </ul> 

		<!-- <h3>HomeContainer</h3> -->
	</div>
</template>

<script>
	// 按需求导入 Toast 样式
	import { Toast } from 'mint-ui'

	export default {
		data(){
			return {
				// 保存轮播图的数组，使用请求的真数据
				// lunbotuList:[]

				// 使用本地假数据......
				lunbotuList:[
				{url:"http://localhost:3000/public/img/img01.jpg",img:"http://localhost:3000/public/img/img01.jpg"},
				{url:"http://localhost:3000/public/img/img02.jpg",img:"http://localhost:3000/public/img/img02.jpg"}
				]
			}
		},
		// 先把请求数据的方法注销，使用假数据算了......
		// created(){
		// 	this.getLunbotu()
		// },
		methods:{
			// 获取轮播图数据的方法
			getLunbotu(){
				// this.$http.get('http://localhost:5000/getdata').then(result => {
				// 因为全局配置了根路径，所以这里可以不用根路径，也不要斜杠开头
				this.$http.get('getdata').then(result => {
					console.log(result)
					if(result.status === 200){
						// 请求数据成功
						Toast('请求数据成功！！')
						this.lunbotuList = result.body
					} else {
						// 请求数据失败
						Toast('加载轮播图失败！！')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 给轮播图区域设置样式 */
	.mint-swipe{

		height: 200px;
		
		/* 原生的语法：.mint-swipe-item:nth-child(1){} */

		.mint-swipe-item{

			/* 这种语法是 scss 特有的 */
			&:nth-child(1){
				background-color: red;
			}
			&:nth-child(2){
				background-color: blue;
			}
			&:nth-child(3){
				background-color: cyan;
			}

			img{
				width: 100%;
				height: 100%;
			}
			
		}

	}

	.mui-grid-view.mui-grid-9{
		background-color: #fff;
		border: none;
		img{
			width: 60px;
			height: 60px;
		}
		.mui-media-body{
			font-size: 13px;
		}
	}

	.mui-grid-view.mui-grid-9 .mui-table-view-cell{
		border: 0;
	}
</style>

